
@font-face {
  font-family: "Lexend";
  src: url('../font/Lexend-Regular.ttf');
}

@font-face {
  /* 自定义的字体名车，调用该字体时使用 */
  font-family: "ZenDots";
  /* 引用字体包。.ttf后缀不区分大小写，用.TTF也可以 */
  src: url('../font/ZenDots-Regular.ttf');
}

@font-face {
  font-family: "Noto"; //自定义名字
  font-weight: normal;
  font-style: normal;
  src: url('../font/NotoSans-Bold-5.ttf');
}

@font-face {
  /* 自定义的字体名车，调用该字体时使用 */
  font-family: "Monitor";
  /* 引用字体包。.ttf后缀不区分大小写，用.TTF也可以 */
  src: url('../font/Monitor_title.ttf');
}
/*
  font-size
*/
@for $i from 10 through 100 {
  .fs-#{$i} {
    font-size: #{$i}px;
  }
}

/*
  width
*/
@for $i from 0 through 500 {
  .w-#{$i} {
    width: #{$i}+'%';
  }

  .w-p-#{$i} {
    width: #{$i}+'px';
  }
}

/*
  height
*/
@for $i from 0 through 100 {
  .h-#{$i} {
    height: #{$i}+'%';
  }
  .h-p-#{$i} {
    height: #{$i}+'px';
  }
}

/*
  border-radius
*/
@for $i from 0 through 100 {
  .border-radius-#{$i} {
    border-radius: #{$i}+'px';
  }
}

/*
  top
*/
@for $i from 0 through 200 {
  .top-#{$i} {
    top: #{$i}+'px';
  }
}

/*
  left
*/
@for $i from 0 through 200 {
  .left-#{$i} {
    left: #{$i}+'px';
  }

  .left-p-#{$i} {
    left: #{$i}+'%';
  }
}

/*
  right
*/
@for $i from 0 through 200 {
  .right-#{$i} {
    right: #{$i}+'px';
  }
}

/*
  bottom
*/
@for $i from 0 through 200 {
  .bottom-#{$i} {
    bottom: #{$i}+'px';
  }
}

/*
  margin
*/

.ma-c {
  margin: auto;
}

@for $i from 0 through 200 {
  .ma-#{$i} {
    margin: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .my-#{$i} {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .mx-#{$i} {
    margin-left: #{$i}px;
    margin-right: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .mt-#{$i} {
    margin-top: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .mb-#{$i} {
    margin-bottom: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .ml-#{$i} {
    margin-left: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .mr-#{$i} {
    margin-right: #{$i}px;
  }
}

/*
  padding
*/
@for $i from 0 through 200 {
  .pa-#{$i} {
    padding: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .py-#{$i} {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .px-#{$i} {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .pt-#{$i} {
    padding-top: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .pb-#{$i} {
    padding-bottom: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .pl-#{$i} {
    padding-left: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .pr-#{$i} {
    padding-right: #{$i}px;
  }
}

@for $i from 0 through 200 {
  .mr-#{$i} {
    margin-right: #{$i}px;
  }
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1
}

.flex-row {
  @extend .flex;
  flex-direction: row;
}

.flex-col {
  @extend .flex;
  flex-direction: column;
}


.flex-wrap {
  flex-wrap: wrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-row-c {
  @extend .flex-row;
  justify-content: center;
  align-items: center;
}

.flex-row-e-c {
  @extend .flex-row;
  justify-content: end;
  align-items: center;
}

.flex-row-c-t {
  @extend .flex-row;
  justify-content: center;
  align-items: flex-start;
}

.flex-row-s-c {
  @extend .flex-row;
  justify-content: start;
  align-items: center;
}

.flex-row-c-b {
  @extend .flex-row;
  justify-content: center;
  align-items: flex-end;
}

.flex-row-sb {
  @extend .flex-row;
  justify-content: space-between;
}

.flex-row-sb-c {
  @extend .flex-row;
  justify-content: space-between;
  align-items: center;
}

.flex-row-sb-s {
  @extend .flex-row;
  justify-content: space-between;
  align-items: flex-start;
}

.flex-row-sb-e {
  @extend .flex-row;
  justify-content: space-between;
  align-items: flex-end;
}

.flex-row-sa {
  @extend .flex-row;
  justify-content: space-around;
  align-items: center;
}

.flex-row-sa-s {
  @extend .flex-row;
  justify-content: space-around;
  align-items: flex-start;
}

.flex-row-sa-e {
  @extend .flex-row;
  justify-content: space-around;
  align-items: flex-end;
}

.flex-col-c {
  @extend .flex-col;
  align-items: center;
}

.flex-col-c-c {
  @extend .flex-col;
  justify-content: center;
  align-items: center;
}

.flex-col-m {
  @extend .flex-col;
  justify-content: center;
}

.flex-col-sb {
  @extend .flex-col;
  justify-content: space-between;
}


.overflow-h {
  overflow: hidden;
}

.overflow-a {
  overflow: auto;
}

.overflow-x {
  overflow-x: auto;
  overflow-y: hidden;
}

.overflow-y {
  overflow-x: hidden;
  overflow-y: auto;
}

.fw-bold {
  font-weight: bolder;
}

.text-c {
  text-align: center;
}

.text-r {
  text-align: right;
}

.text-l {
  text-align: left;
}

.text-color-primary {
  color: $primary
}

.text-color-white {
  color: #fff
}

.text-color-light {
  color: #8b8b8b
}

.text-color-warning {
  color: #FAAB0C
}

.text-underline {
  text-decoration: underline;
}

.pos-rel {
  position: relative;
}

.pos-ab {
  position: absolute;
}

.pos-fix {
  position: fixed;
}
